<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));


      const piePatternSrc =
              '';
      const bgPatternSrc =
              '';
      const piePatternImg = new Image();
      piePatternImg.src = piePatternSrc;
      const bgPatternImg = new Image();
      bgPatternImg.src = bgPatternSrc;

      // 指定图表的配置项和数据
      var option = {
        backgroundColor: {
          image: bgPatternImg,
          repeat: 'repeat'
        },
        title: {
          text: '饼图纹理',
          textStyle: {
            color: '#235894'
          }
        },
        tooltip: {},
        series: [
          {
            name: 'pie',
            type: 'pie',
            selectedMode: 'single',
            selectedOffset: 30,
            clockwise: true,
            label: {
              fontSize: 18,
              color: '#235894'
            },
            labelLine: {
              lineStyle: {
                color: '#235894'
              }
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>